<template>
  <div>
    <div>
      <div class="result">
        <div style="margin-bottom: 20px;">
          单程:
          <span class="route_start">{{ route.query.upCity }}</span>
          <img src="../../assets/source_material/右箭头.png" alt="" srcset="" class="plane-img" />
          <span class="route_start">{{ route.query.downCity }}</span>
          <span class="route_date">{{ route.query.upDate }}</span>
        </div>
        <TicketSort :ticket="ticketsList" :transTicket="transTicketsList" ref="tSort" />
        <div class="empty" v-if="!transTicketsList.transTickets.length && !ticketsList.tickets.length">
          <img src="..//..//assets/没有数据.png" alt="" style="width: 150px;height: 100px;margin: auto;margin-left: 20px;">
          <span style="margin: auto;margin-left: 10px; width: 1100px;">
            您查询的的机票可能因无航班或航班座位已售完导致暂时无法查询到对应价格。建议您更换旅行日期或旅行城市重新查询。
          </span>
        </div>
        <div>
          <div v-for="(ticket, index) in ticketsList.tickets" v-infinite-scroll="load" :key="index">
            <div class="item" v-if="index < count">
              <div class="item1">
                <div class="item-hover">
                  <img :src="ticket.companyLogos" alt="" class="imgs" />
                  <div class="title1">
                    <span>
                      <p class="airline_company">{{ ticket.company }}</p>
                      <el-tooltip effect="light">
                        <template #content>
                          <div class="planeCard" v-if="data.plane != ''">
                            <el-row v-if="data.plane.airlines">
                              <el-col :span="24">
                                <div class="planeTitle">机型信息说明</div>
                              </el-col>
                              <el-col :span="24">
                                <img :src="data.plane.airlines.logos" alt="" class="imgSmall" /><label
                                  class="airline_company">{{ data.plane.airlines.name }}</label><span
                                  class="airline_company"> {{ ticket.fname }}</span>
                                <!-- {{ data.plane }} -->
                              </el-col>
                              <el-col :span="24">
                                <span>计划机型：{{ ticket.pname }}</span><span>飞机编号：{{ data.plane.serial }}</span><span>
                                  飞行速度：{{ data.plane.speed }}km/h</span>
                              </el-col>
                              <el-col :span="24">
                                <span>计划乘坐人数：{{ data.plane.takeNumber }}人</span>
                              </el-col>
                              <el-col :span="24">
                                <span>准点率：100%</span><span>安全到达率：100%</span><span>顾客满意程度：
                                  <el-rate v-model="start" disabled show-score score-template="{value}分" show-text />
                                </span>
                              </el-col>
                              <el-col :span="24">
                                <span>头等舱设计乘坐人数：{{ data.plane.firstClass }}人 </span>
                                <span>商务舱设计乘坐人数：{{ data.plane.businessClass }}人</span>
                                <span>经济舱设计乘坐人数：{{ data.plane.economyClass }}人</span>
                              </el-col>
                            </el-row>
                          </div>
                        </template>
                        <span class="flight_number" @mouseenter="plane(ticket.pid)">{{ ticket.fname }} {{ ticket.pname
                        }}</span>
                      </el-tooltip>
                    </span>
                  </div>
                  <div class="title2">
                    <span class="span">{{ ticket.startTime.slice(0, 5) }}</span>
                    <div class="time1">{{ ticket.upAirportName }}</div>
                    <span class="plane-time"><Time theme="outline" size="15" fill="#6b778c" />
                      {{ ticket.sailingTime.slice(0, 2) }}时{{ ticket.sailingTime.slice(3, 5) }}分</span>
                    <img src="../../assets/小飞机.png" alt="" srcset="" class="plane-img1" />
                    <span class="span">{{ ticket.endTime.slice(0, 5) }}</span>
                    <div class="time2">{{ ticket.downAirportName }}</div>
                  </div>
                  <div class="title3">
                    <span>
                      <span class="text-small">￥</span>
                      <span v-if="ticket.discountPrice > 0">{{ ticket.discountPrice }}</span>
                      <span v-else>{{ ticket.economyPrice }}</span>
                    </span><span class="text-small">起</span><br>
                    <div class="discountClass" v-if="ticket.discountClass < 10">经济舱{{ parseInt(ticket.discountClass *
                        10) / 10
                    }}折</div>
                  </div>
                  <el-button type="primary" size="default" @click="zk(ticket.id)" class="bu" v-if="ticket.id != c">预订
                    <down theme="outline" size="24" fill="#ffffff" />
                  </el-button>
                  <el-button type="warning" size="default" @click="zk(ticket.id)" class="bu" v-if="ticket.id == c">收起
                    <up theme="outline" size="24" fill="#ffffff" />
                  </el-button>
                </div>
              </div>
              <div v-if="ticket.id == c" class="ticketStore">
                <div class="ticketStore">
                  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane v-for="(tss, index) in ticket.ticketStores" :label="tss.ticketTypeName"
                      :name="tss.ticketTypeName" :key="index">
                      <div class="st">
                        {{ tss.ticketTypeName }}
                      </div>
                      <div class="sn">剩余票数:{{ tss.ticketCount }}</div>
                      <div class="sp">
                        <span v-if="tss.ticketType != 3"> ￥:{{ tss.ticketPrice }}</span>
                        <span v-else> ￥:{{ ticket.discountPrice }} </span>
                      </div>
                      <el-button type="primary" size="default" @click="passenger(ticket, tss)" class="but"
                        :disabled="tss.ticketCount <= 0">购买
                      </el-button>
                    </el-tab-pane>
                  </el-tabs>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 中转 -->
    <div class="result" v-show="!tSort.isOneWay">
      <div class="transfers" v-if="transTicketsList.transTickets != ''">中转组合</div>
      <div v-for="(ticket, i) in transTicketsList.transTickets" v-infinite-scroll="load" :key="i">
        <div class="item" v-if="i < count">
          <div class="item1">
            <div class="item-hover">
              <div class="title1 transfers-title">
                <p class="airline_company transfers-company" v-for="(it, index) in ticket.tickets" :key="index">
                  <img :src="it.companyLogos" alt="" class="transfers-imgs" />
                  {{ it.company }}

                  <el-tooltip effect="light">
                    <template #content>
                      <div class="planeCard" v-if="data.plane != ''">
                        <el-row v-if="data.plane.airlines">
                          <el-col :span="24">
                            <div class="planeTitle">机型信息说明</div>
                          </el-col>
                          <el-col :span="24">
                            <img :src="data.plane.airlines.logos" alt="" class="imgSmall" /><label
                              class="airline_company">{{ data.plane.airlines.name }}</label><span
                              class="airline_company"> {{ it.fname }}</span>
                            <!-- {{ data.plane }} -->
                          </el-col>
                          <el-col :span="24">
                            <span>计划机型：{{ it.pname }}</span><span>飞机编号：{{ data.plane.serial }}</span><span>
                              飞行速度：{{ data.plane.speed }}km/h</span>
                          </el-col>
                          <el-col :span="24">
                            <span>计划乘坐人数：{{ data.plane.takeNumber }}人</span>
                          </el-col>
                          <el-col :span="24">
                            <span>准点率：100%</span><span>安全到达率：100%</span><span>顾客满意程度：
                              <el-rate v-model="start" disabled show-score score-template="{value}分" show-text />
                            </span>
                          </el-col>
                          <el-col :span="24">
                            <span>头等舱设计乘坐人数：{{ data.plane.firstClass }}人 </span>
                            <span>商务舱设计乘坐人数：{{ data.plane.businessClass }}人</span>
                            <span>经济舱设计乘坐人数：{{ data.plane.economyClass }}人</span>
                          </el-col>
                        </el-row>
                      </div>
                    </template>
                    <span class="flight_number" @mouseenter="plane(it.pid)">{{ it.fname }} {{ it.pname
                    }}</span>
                  </el-tooltip>
                </p>
              </div>

              <div class="transfer_title2">
                <span v-for="(item, index) in ticket.tickets" :key="index">
                  <span v-if="index == 1">
                    <span class="span">{{ item.endTime.slice(0, 5) }}</span>
                  </span>
                  <div v-if="index == 1" class="transfer_time2">{{ item.downAirportName }}</div>
                  <span v-else>
                    <div class="transfer_time1">{{ item.upAirportName }}</div>
                    <span class="span">{{ item.startTime.slice(0, 5) }}</span>
                    <span class="plane-time1"><Time theme="outline" size="15" fill="#6b778c" />
                      {{ countTime(ticket.tickets) }}</span>
                    <img src="../../assets/小飞机.png" alt="" srcset="" class="plane-img2" />
                    <!-- 中转详细信息 -->
                    <el-popover placement="bottom-start" title="中转详细信息" :width="300" trigger="hover">
                      <template #reference>
                        <span class="trs">转{{ item.downCity }}{{ residenceTime(ticket.tickets) }}</span>
                      </template>
                      <div>
                        <div v-for="(t, index) in ticket.tickets" style="color: black;">
                          <div style="margin:10px 0px 10px 0px;">
                            <img :src="t.companyLogos" alt="" class="transfers-message-imgs" />
                            <span>{{ t.company }}</span><span style="font-size: 12px;">&nbsp;{{ t.fname }}</span>
                          </div>
                          <div>
                            <img src="..//..//assets/方形.png" style="width: 10px; height: 10px;">
                            <span style="margin-left: 10px;">{{ t.startDate }}&nbsp;{{ t.startTime.slice(0, 5)
                            }}&nbsp;{{
    t.upAirportName
}}</span>
                          </div>
                          <div style="display:flex;">
                            <img src="..//..//assets/方形.png" style="width: 10px; height: 100px;">
                            <span style="margin:auto ; margin-left: 10px;color: #6b778c;">飞行&nbsp;{{ t.sailingTime
                            }}</span>
                          </div>
                          <div>
                            <img src="..//..//assets/方形.png" style="width: 10px; height: 10px;">
                            <span style="margin-left: 10px;">{{ landingTime(t) }}&nbsp;{{ t.endTime.slice(0, 5)
                            }}&nbsp;{{ t.downAirportName }}</span>
                          </div>
                          <div v-if="index == 0" style="margin-top: 20px;margin-bottom: 20px; ">
                            <img src="..//..//assets/等待.png" style="width: 15px; height: 15px;">
                            <span style="margin-left: 5px;">{{ item.downCity
                            }}&nbsp;中转&nbsp;停留&nbsp;{{ residenceTime(ticket.tickets) }}</span>
                          </div>
                        </div>

                      </div>
                    </el-popover>

                  </span>
                </span>
              </div>
              <div class="transfer_title3">
                <span>
                  <span class="text-small">￥</span>
                  <span name="price" v-if="ticket.tickets[0].discountPrice + ticket.tickets[1].discountPrice">
                    {{ ticket.tickets[0].discountPrice + ticket.tickets[1].discountPrice }}
                  </span>
                  <span name="price" v-else>{{ ticket.tickets[0].economyPrice + ticket.tickets[1].economyPrice }}</span>
                </span>
                <span class="text-small">起</span>
                <div class="discountClass">经济舱</div>
                <div class="discountClass">经济舱</div>
              </div>
              <el-button type="warning" size="default" @click="tran = -1" class="transfer_bu" v-if="tran == i">收起
                <up theme="outline" size="24" fill="#ffffff" />
              </el-button>
              <el-button type="primary" size="default" @click="tran = i" class="transfer_bu" v-else>预订
                <down theme="outline" size="24" fill="#ffffff" />
              </el-button>
            </div>
          </div>
          <div v-if="tran == i" class="ticketStore">
            <div class="ticketStore">
              {{ ticket.tickets.ticketStores }}
              <el-tabs v-model="transActiveName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane v-for="(tss, index) in ticket.tickets[0].ticketStores" :label="tss.ticketTypeName"
                  :name="tss.ticketTypeName" :key="index">
                  <div v-if="tss.ticketTypeName == '经济舱'">
                    <div class="st">
                      {{ tss.ticketTypeName }} + {{ tss.ticketTypeName }}
                    </div>
                    <div class="sp">
                      <span>￥{{ ticket.tickets[0].discountPrice + ticket.tickets[1].discountPrice }}</span>
                    </div>
                  </div>

                  <div v-else>

                    <div class="st">
                      {{ tss.ticketTypeName }} + {{ tss.ticketTypeName }}
                    </div>
                    <div class="sp">
                      <span>￥{{ tss.ticketPrice + tss.ticketPrice }}</span>
                    </div>
                  </div>

                  <el-button type="primary" size="default" @click="passenger(ticket, tss)" class="but"
                    :disabled="tss.ticketCount <= 0">购买
                  </el-button>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  reactive,
  ref,
  getCurrentInstance,
  watch,
} from "vue";
import url from "../../common/js/APIUtil";
import { ElMessage } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "../../store/store";
import { Log, Down, Up, Acceleration, ArrowRight, Time } from "@icon-park/vue-next";
import TicketSort from "./TicketSort.vue"
import axios from "axios";

// 调用函数 获得Store
const store = useStore();
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
const activeName = ref("经济舱");
var c = ref();
var tran = ref();
const count = ref(6);
const transActiveName = ref("经济舱");
const start = ref(5);

//机票显示数据
const ticketsList = reactive({ tickets: [], version: 0 })
const transTicketsList = reactive({ transTickets: [] })
const plVisible = ref(false);
//获得子组件数据
const tSort = ref('');
const data = reactive({
  plane: {},
})

const load = () => {
  setTimeout(() => {
    count.value += 2;
  }, 500);
};

//中转行程时间
const countTime = (tickets) => {
  let startDate = new Date(tickets[0].startDate.replace(/-/g, "/") + ' ' + tickets[0].startTime).getTime()
  //算出第二张机票的降落日期
  let endDate = new Date(landingTime(tickets[1]).replace(/-/g, "/") + ' ' + tickets[1].endTime).getTime()
  let tripNumber = endDate - startDate
  let Hours = Math.floor(tripNumber / 1000 / 60 / 60)
  Hours = Hours >= 10 ? Hours : '0' + Hours
  let Minutes = Math.floor(tripNumber / 1000 / 60 % 60)
  Minutes = Minutes >= 10 ? Minutes : '0' + Minutes
  return Hours + '时' + Minutes + '分'
}
//中转停留时间
const residenceTime = (tickets) => {
  let startDate = new Date(tickets[1].startDate.replace(/-/g, "/") + ' ' + tickets[1].startTime).getTime()
  //算出第一张机票的降落日期
  let endDate = new Date(landingTime(tickets[0]).replace(/-/g, "/") + ' ' + tickets[0].endTime).getTime()
  let tripNumber = startDate - endDate
  let message = Math.floor(tripNumber / 1000 / 60 / 60) + 'h' + Math.floor(tripNumber / 1000 / 60 % 60) + 'm'
  if (Math.floor(tripNumber / 1000 / 60 / 60) == 0) {
    message = message.slice(2, 10)
  } else if (Math.floor(tripNumber / 1000 / 60 % 60) == 0) {
    message = message.slice(0, message.indexOf('h') + 1)
  }

  return message
}
//算出机票的降落日期
const landingTime = (ticket) => {
  let startTime = parseInt(ticket.startTime.slice(0, 2))
  let endTime = parseInt(ticket.endTime.slice(0, 2))
  let endDate = new Date(ticket.startDate.replace(/-/g, "/") + ' ' + ticket.endTime).getTime()
  endDate = startTime <= endTime ? endDate : endDate + (1000 * 60 * 60 * 24)
  endDate = new Date(endDate)
  let year = endDate.getFullYear()
  let month = endDate.getMonth() + 1 >= 10 ? endDate.getMonth() + 1 : '0' + (endDate.getMonth() + 1)
  let date = endDate.getDate() >= 10 ? endDate.getDate() : '0' + endDate.getDate()
  return year + '-' + month + '-' + date
}

const again_onSubmit = async () => {
  ticketsList.version = 0
  //获取直达数据
  //加载动画启动
  store.loading = true;
  //超时响应
  setTimeout(() => {
    if (store.loading) {
      store.loading = false;
    }
  }, 5000);
  //同城拦截
  if (route.query.upCity == route.query.downCity) {
    ElMessage.error("同城航班暂不支持");
    store.loading = false;
    return false;
  }
  //axios获取所有机票信息方法
  await proxy.$http
    .get(
      url.API_POST_QUERY +
      route.query.upDate +
      "/" +
      route.query.upCity +
      "/" +
      route.query.downCity
    )
    .then((res) => {
      store.loading = false;
      //返回数据判定
      if (!res.data.data) {
        return
      }
      ticketsList.tickets = res.data.data;
      ticketsList.tickets.sort(function (a, b) {
        return a.discountPrice - b.discountPrice;
      });
      ElMessage.success(res.data.message);
    });
  //获取中转数据
  await proxy.$http
    .post(
      url.API_GET_transfersTicket +
      route.query.upDate +
      "/" +
      route.query.upCity +
      "/" +
      route.query.downCity
    )
    .then((res) => {
      if (!res.data.data) {
        return
      } else if (!res.data.data.length) {
        return
      }
      transTicketsList.transTickets = res.data.data
      transTicketsList.transTickets.sort(function (a, b) {
        return (a.tickets[0].discountPrice + a.tickets[1].discountPrice) - (b.tickets[0].discountPrice + b.tickets[1].discountPrice)
      })
    });
  if (!transTicketsList.transTickets.length && !ticketsList.tickets.length) {
    ElMessage.warning('查询为空')
  }
  ticketsList.version = 1
}

const handleClick = (tab, event) => {
  transActiveName.value = "经济舱"
  activeName.value = "经济舱"
};

watch(route, (newValue, oldValue) => {
  ticketsList.tickets = []
  transTicketsList.transTickets = []
  c.value = -1
  tran.value = -1
  transActiveName.value = "经济舱"
  activeName.value = "经济舱"

  if (route.path === '/index/ticketinformation/oneway') {
    again_onSubmit()
  }
}, { immediate: true });

const passenger = (value, ticket) => {
  localStorage.setItem("ticket", JSON.stringify(value));
  localStorage.setItem("tickets", JSON.stringify(ticket));
  router.push({
    name: "information",
  });
};

const zk = (index) => {
  if (index == c.value) {
    c.value = 0;
  } else {
    c.value = index;
  }
};

const plane = async (id) => {
  await axios.get(url.API_GET_Plane + "/" + id).then(res => {
    data.plane = res.data
    start.value = (Math.random() * 1 + 4).toFixed(1)
  })
}


</script>
<style scoped>
:deep(.demo-tabs > .el-tabs__content) {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

:deep(.el-tabs__item) {
  text-align: center;
  width: 100%;
}

:deep(.el-tabs__nav-wrap) {
  overflow: visible;
}

:deep(.el-tabs__nav) {
  margin-left: 310px;
}

.flight_number {
  font-size: 10px;
  color: rgba(6, 127, 249, 1);
  cursor: pointer;
}

.route_date {
  font-size: 16px;
}

.plane-img {
  margin-top: 10px;
  width: 70px;
  height: 20px;
}

.bu {
  margin-top: 28px;
  font-size: 20px;
  width: 100px;
  height: 40px;
  margin-left: 20px;
}

.plane-img1 {
  margin-top: 19px;
  margin-left: -27px;
  width: 55px;
  height: 40px;
  position: absolute;
}

.plane-time {
  margin-top: 3px;
  margin-left: -37px;
  font-size: 14px;
  color: #6b778c;
  position: absolute;
}

.plane-time1 {
  margin-top: -5px;
  margin-left: -37px;
  font-size: 14px;
  color: #6b778c;
  position: absolute;
}

.plane-img2 {
  margin-top: 10px;
  margin-left: -27px;
  width: 55px;
  height: 40px;
  position: absolute;
}

.text-small {
  font-size: 15px;
}

.discountClass {
  margin-left: 20px;
  font-size: 8px;
  color: #6b778c;
}

.item {
  margin-top: 5px;
  border-radius: 5px;
  width: 1300px;
  min-height: 100px;
  background-color: rgba(245, 247, 250, 0.8);
  box-shadow: var(--el-box-shadow-light);
}

.item1 {
  margin-top: 5px;
  border-radius: 5px;
  width: 1300px;
  min-height: 100px;
}

.title1 {
  width: 200px;
  margin-top: 20px;
  float: left;
  margin-left: 1%;
}

.title2 {
  width: 620px;
  text-align: center;
  float: left;
  margin: 21px 0px;
}

.transfer_title2 {
  width: 620px;
  text-align: center;
  float: left;
  margin: 21px 0px;
  margin-left: -35px;
}

.transfer_title2 .span {
  font-size: 24px;
  margin: 0px 80px;
}

.time1 {
  position: absolute;
  left: 36%;
  z-index: 1;
}

.transfer_time1 {
  position: absolute;
  left: 36%;
  margin-top: 33px;
}

.time2 {
  position: absolute;
  left: 50.2%;
}

.transfer_time2 {
  position: absolute;
  left: 50.4%;
}

.title2 .span {
  font-size: 24px;
  margin: 0px 80px;
}

.title3 {
  margin: 30px 60px 0px 60px;
  margin-right: 10px;
  width: 130px;
  float: left;
  font-size: 26px;
  color: red;
  border-bottom: 1px;
}

.transfer_title3 {
  margin: 20px 60px 0px 60px;
  margin-right: 10px;
  width: 130px;
  float: left;
  font-size: 26px;
  color: red;
  border-bottom: 1px;
}

.but {
  float: right;
  margin-right: 15px;
  font-size: 20px;
  width: 100px;
  height: 40px;
}

.sn {
  position: absolute;
  left: 40%;
  color: rgba(22, 97, 171);
  margin-left: 10%;
  float: left;
  font-size: 20px;
  margin-top: 10px;
}

.st {
  margin-left: 20%;
  float: left;
}

.sp {
  position: absolute;
  left: 61%;
  color: rgba(228, 191, 17);
  margin-left: 11%;
  float: left;
}

/* 中转 */
.but {
  float: right;
  margin-right: 44px;
  font-size: 20px;
  width: 100px;
  height: 40px
}

.result {
  width: 1300px;
  border-radius: 10px;
  margin: 20px auto;
  z-index: 100;
}

.transfers-company {
  width: 300px;
  font-size: 13px;
  height: 30px;
}

.imgs {
  margin-left: 30px;
  margin-top: 30px;
  width: 40px;
  float: left;
}


.trs {
  font-size: 10px;
  position: absolute;
  padding-top: 48px;
  margin-left: -40px;
  color: rgba(6, 127, 249, 1);
  cursor: pointer;
}

.ticketStore {
  width: 100%;
  height: auto;
  /* background-color: white; */
}

.transfers-imgs {
  position: relative;
  top: 5px;
  margin: 10px 10px 0px 25px;
  width: 25px;
  height: 25px;
}

.flight_number {
  font-size: 10px;
  color: rgba(6, 127, 249, 1);
  cursor: pointer;
}

.item:hover {
  background-size: 100%;
  box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.3), 1px 0.5px rgba(6, 127, 249, 1),
    inset 4px 0px rgba(6, 127, 249, 0.8);
  background: rgba(236, 245, 255, 0.7);
}

.transfers-title {
  width: 200px;
  height: 60px;
  margin: 10px;
  margin-right: 110px;
  font-size: 15px;
}

.route_start {
  font-size: 32px;
  margin: 0px 20px;
}

.route_date {
  font-size: 16px;
}

/*  */

.airline_company {
  height: 30px;
}





.text-small {
  font-size: 15px;
}


.bu {
  margin-top: 28px;
  font-size: 20px;
  width: 100px;
  height: 40px;
  margin-left: 20px;
}

.transfer_bu {
  margin-top: 28px;
  font-size: 20px;
  width: 100px;
  height: 40px;
  margin-left: 20px;
}

.transfers {
  margin-bottom: -5px;
  padding-left: 30px;
  width: 160px;
  border-radius: 10px 10px 0px 0px;
  background-color: white;
  font-size: 32px;
  font-family: "Times New Roman", Times, serif;
  font-weight: 700;
  border: 1px solid white;
  border-bottom: none;
}

.transfers-message-imgs {
  position: relative;
  top: 5px;
  margin: 0px 10px 0px 0px;
  width: 20px;
  height: 20px;
}

.imgSmall {
  width: 20px;
  height: 20px;
}

.planeCard {
  width: 500px;
  padding: 10px;
}

.planeCard span {
  margin-left: 15px;
  margin-top: 10px;
}

.planeCard label {
  font-size: 20px;
  margin-left: 5px;
}

.planeTitle {
  font-size: 25px;
  margin-bottom: 20px;
}

.empty {
  margin-top: 20px;
  display: flex;
  width: 1300px;
  height: 150px;
  background-color: rgb(255, 242, 226);
}
</style>